<template>
	<view class="index-container">
		<button class='auth-btn' :style="{height: windowHeight + 'rpx'}" v-if="isFirstUse" type='primary' open-type="getUserInfo"
		 :withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
		</button>
		<swiper class="swiper" :indicator-dots="true" indicator-color="rgba(19, 19, 19, 0.5)" indicator-active-color="#131313"
		 :autoplay="true">
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<view class="swiper-item">
					<video class="banner-img" v-if="item.mp4" :src="'data:video/mp4;base64,'+item.mp4" autoplay loop></video>
					<image class="banner-img" v-else-if="item.gif" :src="'data:image/gif;base64,'+item.gif" mode="scaleToFill"></image>
					<image class="banner-img" v-else :src="'data:image/jpeg;base64,'+item.img" mode="scaleToFill"></image>
					<!-- <image class="banner-img" :src="'data:image/jpeg;base64,'+item.img" mode="scaleToFill"></image> -->
				</view>
			</swiper-item>
		</swiper>
		<!-- <official-account v-if="!isAttention"></official-account> -->
		<view class="attention-org">
			<view class="left">
				<image class="logo" src="../../static/images/logo.png" mode="scaleToFill"></image>
				<view class="attention-org-content">
					<view class="title">嘉世利研学</view>
					<view class="note">嘉世利一【平行课堂】创始人，中国素质教育中国素质教育中国素质教育中国素质教育</view>
				</view>
			</view>
			<image class="scan" src="../../static/images/home/scan.png" mode="scaleToFill" @click="scanCode"></image>
		</view>
		<view class="index-tools">
			<view class="row">
				<navigator class="cell" url="../satellite-positioning/satellite-positioning">
					<image class="nav-img" src="../../static/images/home/index-img-1.png" mode=""></image>
					<text class="text">卫星定位</text>
				</navigator>
				<view class="cell" @click="electronic()">
					<!-- <view class="cell" @click="addNumber"> -->
					<image class="nav-img" src="../../static/images/home/index-img-2.png" mode=""></image>
					<text class="text">电子围栏</text>
				</view>
				<navigator class="cell" url="../motion-track/motion-track">
					<image class="nav-img" src="../../static/images/home/index-img-3.png" mode=""></image>
					<text class="text">运动轨迹</text>
				</navigator>
				<navigator class="cell" url="../team/team">
					<image class="nav-img" src="../../static/images/home/index-img-4.png" mode=""></image>
					<text class="text">团队状态</text>
				</navigator>
			</view>
			<view class="row">
				<view class="center">
					<!-- <view class="cell" @click="addNumber"> -->
					<navigator class="cell" url="/pages/eagle-eye/eagle-eye">
						<view class="cell">
							<image class="nav-img" src="../../static/images/home/index-img-5.png" mode=""></image>
							<text class="text">鹰眼</text>
						</view>
					</navigator>
					<!-- </view> -->
					<!-- <view class="cell" @click="addNumber"> -->
					<view class="cell">
						<image class="nav-img" src="../../static/images/home/index-img-6.png" mode=""></image>
						<text class="text">跌倒提醒</text>
					</view>
					<view class="big1 cell" @click="toOpera(LEDtype)">
						<image class="nav-img" :src="`../../static/images/home/index-img-7-${LEDtype}.png`" mode=""></image>
						<!-- <text class="text">{{LEDtype ? '应急照明' : '照明补光'}}</text> -->
					</view>
				</view>
				<view class="center">
					<view class="big2 cell" @click="toOpera('LEDSOS')">
						<image class="nav-img" src="../../static/images/home/index-img-8.png" mode=""></image>
						<text class="text">应急呼救</text>
					</view>
					<!-- <view class="cell big2-item" @click="addNumber"> -->
					<navigator class="cell" url="/pages/punch-in/punch-in">
						<view class="cell big2-item">
							<image class="nav-img" src="../../static/images/home/index-img-9.png" mode=""></image>
							<text class="text">打卡签到</text>
						</view>
					</navigator>
					<!-- </view> -->
					<!-- <view class="cell big2-item" @click="addNumber"> -->
					<view class="cell big2-item">
						<image class="nav-img" src="../../static/images/home/index-img-10.png" mode=""></image>
						<text class="text">添加号码</text>
					</view>
				</view>
			</view>
			<view class="row">
				<navigator class="cell-3 position" url="../system-setting/system-setting">
					<image class="nav-img" src="../../static/images/home/index-img-11.png" mode=""></image>
					<navigator class="text" url="../system-setting/system-setting">系统设置</navigator>
				</navigator>
				<view class="cell-3 position" @click="toOpera('REBOOT')">
					<image class="nav-img" src="../../static/images/home/index-img-12.png" mode=""></image>
					<text class="text">远程重启</text>
				</view>
				<view class="cell-3 small-box">
					<view class="small" @click="toOpera('PWOFF')">
						<image class="nav-img" src="../../static/images/home/index-img-13.png" mode=""></image>
						<text class="text">远程关机</text>
					</view>
					<navigator class="small" @click="logout" open-type="exit" target="miniProgram">
						<image class="nav-img" src="../../static/images/home/index-img-14.png" mode=""></image>
						<text class="text">退出登录</text>
					</navigator>
					<view class="small">
						<image class="nav-img" src="../../static/images/home/index-img-15.png" mode=""></image>
						<text class="text">常见问题</text>
					</view>
					<view class="small">
						<image class="nav-img" src="../../static/images/home/index-img-16.png" mode=""></image>
						<text class="text">免责声明</text>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="addNumPopup" type="center">
			<view class="addNumPopup">
				<image src="../../static/images/home/addtip-bg.png" mode="" class="addTipImg-bg"></image>
				<image src="../../static/images/home/addNumTips.png" mode="" class="addTipImg"></image>
				<text class="addtip">敬请期待</text>
				<button class="popup-button" @click="addNumberClose">收到</button>
			</view>
		</uni-popup>
		<uni-popup ref="useDevice" type="center">
			<view class="useDevicePopup">
				<view class="title">{{title}} - 选择设备</view>
				<scroll-view class="useDevice-scroll-view" scroll-y="true">
					<view class="useDevice-scroll-view-item" v-for="(item, index) in list" :key="index" @click="remoteOperation(item.package_no)">
						<view class="left">
							<image class="img" :src="item.thumb"></image>
							<view class="centet">
								<view class="name">{{item.subName}}</view>
								<view class="packageNo">
									{{item.package_no}}
								</view>
							</view>
						</view>
						<view class="btn">选择</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'

	export default {
		data() {
			return {
				// 是否关注
				isAttention: false,
				// 轮播图
				bannerList: [],
				// 是第一次授权用户
				isFirstUse: uni.getStorageSync("isFirstUse"),
				// 可用高度
				windowHeight: 1200,
				// 灯光说明
				LEDtype: 'close',
				// 团队列表
				list: [],
				// 选中操作
				deviceOpera: '',
				// 操作提示文字
				title: ''
			}
		},
		onLoad() {},
		onShow() {
			this.windowHeight = uni.getStorageSync("windowHeight")
			uni.login({
				provider: "weixin",
				success: (loginRes) => {
					this.$utils.setData("userCode", loginRes.code)
					// 不是第一次使用的才去获取用户信息
					if (!this.isFirstUse) {
						uni.getUserInfo({
							provider: "weixin",
							success: (infoRes) => {
								this.$utils.setData("encryptedData", infoRes.encryptedData)
								this.$utils.setData("iv", infoRes.iv)
								this.login(infoRes.encryptedData, infoRes.iv)
							},
							fail: err => {}
						})
					}
				}
			})
			this.getBanner()
			this.searchTeam()
			this.getNowLocation()
			// this.$myRuquest({
			// 	url: "/jsl/qrcode/qrCodeX",
			// 	method: 'GET'
			// }).then(res => {
			// 	console.log(res.qr)
			// })
			// this.getAttention()
		},
		methods: {
			/**
			 * 点击操作
			 */
			toOpera(LEDtype) {
				this.deviceOpera = ''
				this.title = ''
				switch (LEDtype) {
					case 'close':
						this.deviceOpera = 'LEDLOW'
						this.title = '灯光开关'
						break
					case 'down':
						this.deviceOpera = 'LEDMID'
						this.title = '灯光开关'
						break
					case 'mid':
						this.deviceOpera = 'LEDHIGH'
						this.title = '灯光开关'
						break
					case 'high':
						this.deviceOpera = 'LEDOFF'
						this.title = '灯光开关'
						break
					case 'LEDSOS':
						this.deviceOpera = 'LEDSOS'
						this.title = '应急呼救'
						break
					case 'REBOOT':
						this.deviceOpera = 'REBOOT'
						this.title = '远程重启'
						break
					case 'PWOFF':
						this.deviceOpera = 'PWOFF'
						this.title = 'PWOFF'
						break
				}
				if (this.list.length === 1) {
					this.remoteOperation(this.list[0].package_no)
				} else {
					this.$refs.useDevice.open()
				}
			},
			/**
			 * 获取团队
			 */
			searchTeam(e) {
				this.$myRuquest({
					url: "/jsl/user/UserEquipmentListById",
					data: {
						"requestParams": {
							"procedure": {
								"p_uid": this.$utils.getData("p_uid"),
								"p_page_no": 1,
								"p_page_size": 999
							}
						}
					}
				}).then(res => {
					let list = []
					res.forEach((item, index) => {
						list.push({
							subName: item.nickname,
							thumb: item.avatar,
							package_no: item.package_no
						})
					})
					this.list = list
					if (getCurrentPages()[getCurrentPages().length - 1].route === 'pages/index/index') {
						setTimeout(() => {
							this.searchTeam()
						}, 3000)
					}
				})
			},
			/**
			 * 获取轮播图
			 */
			getBanner() {
				this.$myRuquest({
					url: "/jsl/slideshow/listSlideshow"
				}).then(res => {
					this.bannerList = this.bannerList.concat(res)
				})
			},
			/**
			 * 获取是否关注公众号
			 */
			getAttention() {
				this.$myRuquest({
					url: "/jsl/shareworker/userLogin/gzh",
					data: {
						code: uni.getStorageSync('codeAttention')
					}
				}).then(res => {
					this.isAttention = Boolean(res.subscribe)
				}).catch(() => {
					this.isAttention = false
				})
			},
			/**
			 * 授权
			 */
			wxGetUserInfo(e) {
				this.$utils.setData("encryptedData", e.detail.encryptedData)
				this.$utils.setData("iv", e.detail.iv)
				this.$utils.setData("isFirstUse", false) //记录是否第一次授权  false:表示不是第一次授权
				this.isFirstUse = false
				this.login(e.detail.encryptedData, e.detail.iv)
			},
			/**
			 * 扫码
			 */
			scanCode() {
				uni.scanCode({
					success: res => {
						this.$myRuquest({
							url: "/jsl/user/addEquipment",
							data: {
								"requestParams": {
									"procedure": {
										"p_package_no": res.result,
										"p_uid": this.$utils.getData("p_uid"),
										"p_imei_no": res.result,
										"private_phone": ""
									}
								}
							}
						}).then(responses => {
							uni.showToast({
								title: "新设备添加成功"
							})
						})
					}
				});
			},
			// 登录
			login(encryptedData, iv) {
				this.$myRuquest({
					url: "/jsl/shareworker/userLogin/login",
					data: {
						code: this.$utils.getData("userCode"),
						encryptedData: encryptedData,
						iv: iv
					}
				}).then(res => {
					this.$utils.setData("accessToken", res.accessToken)
					this.$utils.setData("p_uid", res.p_uid)
				}).catch()
			},
			/**
			 * 退出登录
			 */
			logout() {
				uni.clearStorageSync()
			},
			/**
			 * 远程重启
			 * @param {package_no} 操作类型
			 */
			remoteOperation(package_no) {
				this.$myRuquest({
					domain: "http://jsl123.com:12001",
					url: "/jsl/sendSocket/sendSocket",
					data: {
						"requestParams": {
							"procedure": {
								"packageNo": package_no,
								"type": this.deviceOpera,
							},
						}
					}
				}).then(res => {
					uni.showToast({
						title: "设置成功"
					})
					this.$refs.useDevice.close()
					switch (this.deviceOpera) {
						case 'LEDOFF':
							this.LEDtype = 'close'
							break
						case 'LEDLOW':
							this.LEDtype = 'down'
							break
						case 'LEDMID':
							this.LEDtype = 'mid'
							break
						case 'LEDHIGH':
							this.LEDtype = 'high'
							break
					}
				}).catch(() => {
					uni.showToast({
						title: "设置失败"
					})
				})
			},
			/**
			 * 添加添加号码提示
			 */
			addNumber() {
				this.$refs.addNumPopup.open()
			},
			/**
			 * 关闭添加号码提示
			 */
			addNumberClose() {
				this.$refs.addNumPopup.close()
			},
			electronic() {
				uni.navigateTo({
					url: '/pages/electronic-fence/electronic-fence'
				})
			},
			/**
			 * 获取当前位置
			 */
			getNowLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.$utils.setData("centerX", res.longitude)
						this.$utils.setData("centerY", res.latitude)
						console.log(this.$utils.getData("centerX"));
						console.log(this.$utils.getData("centerY"));
					},
				})
			}
		},
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		}
	}
</script>

<style lang="scss">
	.auth-btn {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		opacity: 0;
		z-index: 500;
	}

	.index-container {
		padding-bottom: 5rpx;

		.swiper {
			margin: 0 24rpx 7rpx;
			height: 394rpx;

			.banner-img {
				display: block;
				width: 702rpx;
				height: 394rpx;
			}
		}

		.attention-org {
			padding: 20rpx 24rpx;
			border-top: 1rpx solid #CCCCCC;
			border-bottom: 1rpx solid #CCCCCC;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.logo {
					display: block;
					width: 98rpx;
					height: 98rpx;
				}

				.attention-org-content {
					width: 456rpx;
					margin-left: 10rpx;

					.title {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #343434;
					}

					.note {
						width: 456rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.scan {
				display: block;
				width: 72rpx;
				height: 72rpx;
			}

			.attention-btn {
				display: block;
				width: 110rpx;
				height: 50rpx;
				border: 1rpx solid #1AAD19;
				border-radius: 4rpx;
				text-align: center;
				line-height: 50rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				box-sizing: border-box;
				color: #1AAD19;
				background: transparent;
			}
		}

		.index-tools {
			padding: 25rpx 25rpx 0;

			.row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.cell {
					display: block;
					width: 160rpx;
					height: 160rpx;
					position: relative;

					.nav-img {
						display: block;
						width: 160rpx;
						height: 160rpx;
					}

					.text {
						position: absolute;
						bottom: 20rpx;
						left: 0;
						display: block;
						width: 100%;
						text-align: center;
						font-size: 24rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}

				.center {
					display: flex;
					justify-content: space-between;
					align-content: space-between;
					flex-wrap: wrap;
					width: 340rpx;
					height: 520rpx;

					.big1 {
						width: 340rpx;
						height: 340rpx;

						.nav-img {
							display: block;
							width: 340rpx;
							height: 340rpx;
						}

						.text {
							bottom: 26rpx;
							font-size: 40rpx;
						}
					}

					.big2 {
						width: 340rpx;
						height: 310rpx;

						.nav-img {
							display: block;
							width: 340rpx;
							height: 310rpx;
						}

						.text {
							top: 26rpx;
							font-size: 40rpx;
						}
					}

					.big2-item {

						width: 160rpx;
						height: 188rpx;

						.nav-img {
							display: block;
							width: 160rpx;
							height: 188rpx;
						}
					}
				}

				.cell-3 {
					display: flex;
					justify-content: space-between;
					align-content: space-between;
					flex-wrap: wrap;
					width: 220rpx;
					height: 220rpx;

					.nav-img {
						display: block;
						width: 220rpx;
						height: 220rpx;
					}

					&.position {
						position: relative;

						.text {
							position: absolute;
							bottom: 26rpx;
							left: 0;
							display: block;
							width: 100%;
							text-align: center;
							font-size: 24rpx;
							font-weight: 500;
							color: #FFFFFF;
						}
					}

					&.small-box {
						width: 230rpx;
						height: 220rpx;
						background: #ffffff;

						.small {
							display: block;
							width: 106rpx;
							height: 106rpx;
							position: relative;

							.nav-img {
								display: block;
								width: 106rpx;
								height: 106rpx;
							}

							.text {
								position: absolute;
								bottom: 14rpx;
								left: 0;
								display: block;
								width: 100%;
								text-align: center;
								font-size: 20rpx;
								font-weight: 500;
								color: #FFFFFF;
							}
						}
					}
				}
			}
		}
	}

	.addNumPopup {
		position: fixed;
		display: block;
		width: 589rpx;
		height: 489rpx;
		top: 453rpx - 94rpx;
		left: 50%;
		transform: translate(-50%, 0);

		.addTipImg-bg {
			display: block;
			width: 589rpx;
			height: 489rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 20;
		}

		.addTipImg {
			display: block;
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: 120rpx;
			left: 50%;
			transform: translate(-50%, 0);
			z-index: 30;
		}

		.addtip {
			position: absolute;
			top: 235rpx;
			left: 50%;
			transform: translate(-50%, 0);
			font-size: 32rpx;
			line-height: 31rpx;
			font-weight: 500;
			color: #333333;
			z-index: 30;
		}

		.popup-button {
			position: absolute;
			top: 317rpx;
			left: 50%;
			transform: translate(-50%, 0);
			width: 240rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #21C885;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			z-index: 30;
		}
	}

	.useDevicePopup {
		position: fixed;
		display: block;
		width: 600rpx;
		height: 700rpx;
		top: 170rpx;
		left: 50%;
		transform: translate(-50%, 0);
		background: rgba(255, 255, 255, .8);

		.title {
			font-size: 36rpx;
			color: #333333;
			line-height: 100rpx;
			text-align: center;
		}

		.useDevice-scroll-view {
			height: 560rpx;

			.useDevice-scroll-view-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 20rpx;
				border-top: 1rpx solid #EDEDED;

				.left {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.img {
						display: block;
						width: 60rpx;
						height: 60rpx;
						border-radius: 30rpx;
						overflow: hidden;
						margin-right: 20rpx;
					}

					.center {
						.packageNo {
							font-size: 28rpx;
							color: #333333;
						}

						.name {
							font-size: 24rpx;
							color: #333333;
						}
					}
				}

				.btn {
					width: 120rpx;
					height: 56rpx;
					line-height: 56rpx;
					background: #21C885;
					font-size: 28rpx;
					color: #FFFFFF;
					text-align: center;
					border-radius: 4rpx;
				}
			}
		}
	}
</style>
